<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-setting"></i> 数据分流 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" class="handle-del mr10" @click="handleEdit">分配人员</el-button>
        <el-button type="primary" class="handle-del mr10" @click="handleEdit_men">分配部门</el-button>
        <el-date-picker class="mr10" v-model="startTime_endTime" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
        <!-- <el-select v-model="query.fromType" placeholder="选择来源搜索" class="mr10">
                    <el-option label="选择来源搜索" value=""></el-option>
                    <el-option label="系统录入" value="1"></el-option>
                    <el-option label="腾讯" value="2"></el-option>
                </el-select> -->
        <el-input v-model="query.kw" placeholder="请输入客户名称/电话进行搜索" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <!-- <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="http://192.168.0.143:8080/ddw/customers/uploadExcel"
                    :headers='uploadHeader'
                    :limit="1"
                    accept=".xlsx"
                    :on-success="fileChange"
                    :on-exceed="handleExceed"
                    :on-progress="fileloadChange"
                    :show-file-list="false"
                    style="float:right;"
                    >
                    <el-button size="small" type="primary" :loading="excelLoad">上传Excel</el-button>
                </el-upload> -->
      </div>
      <el-table v-loading="loading" :data="tableData" border class="table" style="width: 100%" ref="multipleTable"
                header-cell-class-name="table-header" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="cCreateTime" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="cName" label="客户名称" width="150">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false">{{scope.row.cName}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="cPhone" label="电话" width="150"></el-table-column>
        <el-table-column prop="fromName" label="客户来源" width="100"></el-table-column>
        <el-table-column prop="cCity" label="所属地区" width="100"></el-table-column>
        <el-table-column prop="cQuota" label="申请额度" width="150"></el-table-column>
        <el-table-column prop="zizhi" label="资质"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="totalCount"
                       :pager-count="5" @current-change="handlePageChange" @prev-click="handlePageChange" @next-click="handlePageChange">
        </el-pagination>
      </div>
    </div>

    <!-- 分配数据弹出框 -->
    <el-dialog title="分配数据" :visible.sync="editVisible" width="30%" :close-on-click-modal="false">
      <el-row v-loading="loadingfenFormLoad">
        <el-input v-model="keyWord" placeholder="请输入姓名查询" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getRen">搜索</el-button>
        <el-row style="margin-top:20px;">
          <el-radio-group v-model="fenFormType" style="width:100%;">
            <el-col :span="6" v-for="(item,i) in fenFormDataArr" :key="item.id" style="margin-bottom:20px;">
              <el-radio :label="item.id">{{item.name}}</el-radio>
            </el-col>
          </el-radio-group>
        </el-row>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分配门店数据弹出框 -->
    <el-dialog title="分配门店数据" :visible.sync="editVisible_men" width="30%" :close-on-click-modal="false">
      <el-row v-loading="loading_menfenFormLoad">
        <el-input v-model="keyWord_men" placeholder="请输入姓名查询" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getRen_men">搜索</el-button>
        <el-row style="margin-top:20px;">
          <el-radio-group v-model="fenFormType_men" style="width:100%;">
            <el-col :span="6" v-for="(item,i) in fenFormDataArr_men" :key="item.name" style="margin-bottom:20px;">
              <el-radio :label="item.id">{{item.name}}</el-radio>
            </el-col>
          </el-radio-group>
        </el-row>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible_men = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit_men">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  DataStreamLists, InternationalWatersSetUserData, DataStreamPeiSub, DataStreamPeiNameSub, DataStreamGetTuan, DataStreamSub
} from '../../../api/index';
import Storage from '../../../utils/localStorage';

export default {
  data() {
    return {
      editVisible: false,
      loading: true,
      startTime_endTime: [],
      query: {
        page: 1,
        limit: 10,
        startTime: "",
        endTime: "",
        kw: '',
        // fromType:""
      },
      totalCount: 0,
      totalPage: 0,

      tableData: [],
      multipleSelection: [],

      loadingfenFormLoad: true,
      fenFormDataArr: [],
      fenFormType: "",
      keyWord: "",

      editVisible_men: false,
      loading_menfenFormLoad: true,
      fenFormDataArr_men: [],
      keyWord_men: '',
      fenFormType_men: "",


      excelLoad: false,
      uploadHeader: { 'Authorization': Storage.getItem('token') ? Storage.getItem('token') : "1" }

    };
  },
  created() {
    this.getData();
    this.getRen();
    this.getRen_men();
  },
  watch: {
    "$route": "getData"
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      this.loading = true;
      DataStreamLists(this.query).then((res) => {
        this.loading = false;
        if (res.code === 0) {
          this.tableData = res.recordList;
          this.tableData.forEach((item, i) => {
            item.zizhi = '';
            if (item.qualifications) {
              this.zizhiStr(item.qualifications, i);
            }
          })
          this.totalCount = res.totalCount;
          this.totalPage = res.totalPage;
        } else {
          this.$message(res.msg);
        }
      });
    },
    //获取人员配置
    getRen() {
      InternationalWatersSetUserData({ keyWord: this.keyWord }).then((res) => {
        this.loadingfenFormLoad = false;
        if (res.code === 0) {
          this.fenFormDataArr = res.userList;
        } else {
          this.$message(res.msg);
        }
      });
    },
    //获取人员配置
    getRen_men() {
      DataStreamGetTuan({ teamName: this.keyWord_men }).then((res) => {
        this.loading_menfenFormLoad = false;
        if (res.code === 0) {
          this.fenFormDataArr_men = res.departmentList;
        } else {
          this.$message(res.msg);
        }
      });
    },
    //整理资质数据
    zizhiStr(e, index) {
      let str = '';
      if (e.house == '1') {
        str += '本地房、';
      } else if (e.house == '2') {
        str += '外地房、';
      }
      if (e.car == '1') str += '有车、';
      if (e.policy == '1') str += '有保单、';
      if (e.socialSecurity == '1') str += '有社保、';
      if (e.shipping == '1') str += '有代发、';
      if (e.smallLoan == '1') str += '有微粒贷、';
      if (e.payTaxes == '1') str += '有企税、';
      if (e.creditCard == '1') str += '有信用卡、';
      if (e.fund == '1') str += '有公积金';
      this.$set(this.tableData[index], 'zizhi', str);
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1
    },
    // 分页切换
    handlePageChange(val) {
      this.loading = true;
      this.$set(this.query, 'page', val);
      this.getData();
    },
    //搜索
    handleSearch() {
      this.query.page = 1;
      if (this.startTime_endTime) {
        this.query.startTime = this.startTime_endTime[0];
        this.query.endTime = this.startTime_endTime[1];
      } else {
        this.query.startTime = "";
        this.query.endTime = "";
      }
      this.getData();
    },
    // 多选操作
    handleSelectionChange(val) {
      let arr = [];
      val.forEach((item, i) => {
        arr.push(item.cId);
      })
      this.multipleSelection = arr;
    },
    // 分配数据
    handleEdit() {
      if (this.multipleSelection.length > 0) {
        this.editVisible = true;
      } else {
        this.$message("请选择需要分配的信息");
      }
    },
    // 确认分配的人
    saveEdit() {
      this.loadingfenFormLoad = true;
      DataStreamPeiNameSub({ cusIds: this.multipleSelection, userId: this.fenFormType }).then((res) => {
        this.editVisible = false;
        this.loadingfenFormLoad = false;
        if (res.code === 0) {
          this.$message.success("分配成功");
          this.multipleSelection = [];
          this.getData();
        } else {
          this.$message(res.msg);
        }
      });
    },
    // 分配门店数据
    handleEdit_men() {
      if (this.multipleSelection.length > 0) {
        this.editVisible_men = true;
      } else {
        this.$message("请选择需要分配的信息");
      }
    },
    // 确认分配的门店
    saveEdit_men() {
      this.loading_menfenFormLoad = true;
      DataStreamSub({ cusIds: this.multipleSelection, teamId: this.fenFormType_men }).then((res) => {
        this.editVisible_men = false;
        this.loading_menfenFormLoad = false;
        if (res.code === 0) {
          this.$message.success("分配成功");
          this.multipleSelection = [];
          this.getData();
        } else {
          this.$message(res.msg);
        }
      });
    },
    //上传中
    fileloadChange(event, file, fileList) {
      this.excelLoad = true;
    },
    //上传成功
    fileChange(response, file, fileList) {
      this.excelLoad = false;
      this.$refs.upload.clearFiles();
      console.log(response);
      console.log(file);
      console.log(fileList);
    },
    //超出上传个数钩子
    handleExceed(files, fileList) {

    }
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
